<template>
    <div class="rotate-card flex-center-col">
        <y-image :src="obj.imageSrc" class="rotate-card-image" fit="contain" >
        </y-image>
        <div class="rotate-card-content flex-center-col" v-text="obj.text">

        </div>
    </div>

</template>

<script>
    import {reactive} from "@vue/reactivity";
    import YImage from "@/components/other/YImage";

    export default {
        name: "RotateCard",
        components: {YImage},
        props:['text','imageSrc'],
        setup(props){
            let obj = reactive({
                imageSrc:props.imageSrc,
                text:props.text
            })


            return{
                obj
            }
        },
        watch:{
          text(newV){
              this.obj.text=newV

          }  ,
          imageSrc(newV){
              this.obj.imageSrc=newV
          }
        }
    }
</script>

<style scoped lang="less">
    .rotate-card{
        min-width: 200px;
        min-height: 300px;
        max-width: 250px;
        max-height: 350px;
        position: relative;
        border-radius: 5px;

        overflow: hidden;
        .rotate-card-image{

            width:100%;

            position: absolute;
            transition: all 0.5s;

        }
        .rotate-card-content{
            transform: rotateY(180deg);
            backface-visibility: hidden;
            position: absolute;
            transition: all 0.5s;
            width: 100%;
            height: 100%;
            background-color:white;

            border-radius: 5px;
        }

    }
    .rotate-card:hover{
        .rotate-card-image{
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }
        .rotate-card-content{
            transform: rotateY(360deg);
            /*background-color: ;*/
        }

    }
</style>